import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import TypeNav from "./components/TypeNav";
import "swiper/css/swiper.min.css";
import Pagination from "@/components/Pagination";
import Dialog from "@/components/Dialog";

// 引入图片懒加载插件
import VueLazyload from "vue-lazyload";
// 引入加载开始时要显示的图片
import load from "@/assets/loading.gif";
// 注册插件
Vue.use(VueLazyload, {
  loading: load,
});

// 全局引入ElementUI;
import ElementUI from "element-ui"; // 全局引入ElementUI
import "element-ui/lib/theme-chalk/index.css"; // 引入样式
Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(ElementUI);

// 按需要引入Element的组件
// 将引入进来的按需组件注册为相应的全局组件
// import { Button, Message, Row } from "element-ui";
// // 将引入进来的按需组件注册为相应的全局组件
// Vue.component(Button.name, Button);
// Vue.component(Message.name, Message);
// Vue.component(Row.name, Row);
// // 将按需引入的组件添加到Vue的原型对象中
// Vue.prototype.$message = Message;

// 启动mock服务器
import "@/mock/mockServe";
Vue.config.productionTip = false;

// 注册成全局组件，这样在哪里都可以直接使用
// Vue.component("TypeNav", TypeNav); // 前者必须是字符串格式
// 由于上面的方式不够灵活，所以用下面的方法
Vue.component(TypeNav.name, TypeNav); //全局注册时，可以通过组件.name读取出组件名称

// 将分页器注册为全局组件
Vue.component(Pagination.name, Pagination);

//将Dialog注册为全局组件
Vue.component(Dialog.name, Dialog);

new Vue({
  beforeCreate() {
    // 全局事件总线
    Vue.prototype.$bus = this;
  },
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
